<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue text-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">文章评论</block>
		</cu-custom>
		<scroll-view scroll-y scroll-with-animation enable-back-to-top>
			<view class="cu-list menu-avatar comment solids-top" >
				<view class="cu-item" v-for="(item, index) in itemList" :key="index">
					<image :src="item.avatar" class="cu-avatar round" ></image>
					<view class="content">
						<view class="text-grey">{{ item.nickName }}</view>
						<view class="text-gray text-content text-df">
							{{ item.comment }}
						</view>
						<view class="bg-grey padding-sm radius margin-top-sm text-sm" v-if="item.reply">
							<view class="flex">
								<view>作者：</view>
								<view class="flex-sub">{{ item.reply }}</view>
							</view>
						</view>
						<view class="margin-top-sm flex justify-end">
							<view class="text-gray text-df"> {{ item.commentTime }}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-load-more iconType="auto" :status="status" />
	</view>
</template>

<script>
	import * as comment from '@/api/blog/article/comment.js'
	export default {
		data() {
			return {
				articleId: 0,
				status: 'init',
				pages: 0,
				pageNumber: 1,
				itemList: []
			}
		},
		onLoad(options){
			this.articleId = options.articleId
			this.search()
		},
		onReachBottom() {
			// 上拉加载下一页
			if (this.status === 'more') {
				this.search(this.pageNumber + 1)
			}
		},
		methods: {
			search(pageNumber) {
				if (pageNumber) {
					this.status = 'loading'
					this.pageNumber = pageNumber
				} else {
					this.status = 'init'
					this.pages = 0
					this.pageNumber = 1
					this.itemList = []
				}
				comment.getPage({
					pageNumber: this.pageNumber,
					articleId: this.articleId
				}).then(res => {
					if (res.code === 1) {
						const data = res.data
						this.pages = data.pages
						if (this.pages == 0) {
							this.status = 'noData'
						} else {
							const rows = data.rows || []
							rows.forEach(item => {
								item.avatar = this.$tools.getImg(item.avatar, '/static/logo.png')
								item.commentTime = this.$tools.formatDate(item.commentTime)
							})
							this.itemList = this.itemList.concat(rows)
							if (this.pages <= this.pageNumber) {
								this.status = 'noMore'
							} else {
								this.status = 'more'
							}
						}
					}
				})
			}
		}
	}
</script>

<style>

</style>
